// 板块异动Vue组件
const BlockMovementComponent = {
    template: `
        <div class="block-movement-page">
            <div class="page-header">
                <h2>板块异动</h2>
                <div class="header-actions">
                    <el-button @click="refreshBlockList" :loading="loadingBlocks" size="small">
                        <i class="el-icon-refresh"></i>
                        刷新列表
                    </el-button>
                </div>
            </div>

            <div class="block-movement-layout">
                <!-- 左侧板块列表 -->
                <div class="block-list-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">板块列表</h3>
                        <div class="panel-actions">
                            <el-tag type="info" v-if="selectedBlock" size="small">
                                当前: {{ selectedBlock.blockName }}
                            </el-tag>
                        </div>
                    </div>
                    
                    <div class="search-input">
                        <el-input
                            v-model="blockSearchQuery"
                            placeholder="搜索板块名称"
                            clearable
                            @input="handleBlockSearch">
                            <i slot="prefix" class="el-icon-search"></i>
                        </el-input>
                    </div>
                    
                    <div class="block-table-container">
                        <el-table
                            :data="paginatedBlockList"
                            style="width: 100%"
                            height="calc(80vh - 200px)"
                            stripe
                            v-loading="loadingBlocks"
                            @row-click="handleBlockClick"
                            :row-class-name="getBlockRowClass">
                            
                            <el-table-column prop="blockName" label="板块名称" min-width="120">
                                <template #default="scope">
                                    <span class="block-name" @click.stop="selectBlock(scope.row)">
                                        {{ scope.row.blockName }}
                                    </span>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="totalMovements" label="总涨停次数" width="100" sortable>
                                <template #default="scope">
                                    <el-tag type="danger" size="mini">{{ scope.row.totalMovements }}</el-tag>
                                </template>
                            </el-table-column>
                            
                            <el-table-column prop="uniqueStocks" label="涉及股票数" width="100" sortable>
                                <template #default="scope">
                                    <el-tag type="primary" size="mini">{{ scope.row.uniqueStocks }}</el-tag>
                                </template>
                            </el-table-column>
                            
                            <el-table-column label="状态" width="80">
                                <template #default="scope">
                                    <el-tag v-if="selectedBlock && selectedBlock.blockName === scope.row.blockName" 
                                           type="success" size="mini">已选</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>

                        <!-- 板块列表分页 -->
                        <div class="pagination-wrapper">
                            <el-pagination
                                @size-change="handleBlockSizeChange"
                                @current-change="handleBlockCurrentChange"
                                :current-page="blockCurrentPage"
                                :page-sizes="[20, 50, 100]"
                                :page-size="blockPageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="filteredBlockList.length"
                                small>
                            </el-pagination>
                        </div>
                    </div>
                </div>

                <!-- 右侧详情面板 -->
                <div class="block-detail-panel">
                    <div v-if="selectedBlock" class="block-detail-container">
                        <div class="panel-header">
                            <h3 class="panel-title">{{ selectedBlock.blockName }}</h3>
                            <div class="panel-actions">
                                <el-button size="small" @click="refreshBlockDetail" :loading="loadingDetail">
                                    <i class="el-icon-refresh"></i>
                                    刷新
                                </el-button>
                            </div>
                        </div>

                        <!-- 统计信息 -->
                        <div class="statistics-info">
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-card class="stat-card">
                                        <div class="stat-title">总涨停次数</div>
                                        <div class="stat-value">{{ selectedBlock.totalMovements }}</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="6">
                                    <el-card class="stat-card">
                                        <div class="stat-title">涉及股票数</div>
                                        <div class="stat-value">{{ selectedBlock.uniqueStocks }}</div>
                                    </el-card>
                                </el-col>
                                <el-col :span="6">
                                    <el-card class="stat-card">
                                        <div class="stat-title">热门股票</div>
                                        <div class="hot-stocks">
                                            <el-tag 
                                                v-for="(stock, index) in getHotStocks()" 
                                                :key="index"
                                                class="hot-stock-tag"
                                                size="mini"
                                                type="warning">
                                                {{ stock }}
                                            </el-tag>
                                        </div>
                                    </el-card>
                                </el-col>
                                <el-col :span="6">
                                    <el-card class="stat-card">
                                        <div class="stat-title">更新时间</div>
                                        <div class="stat-value">{{ lastUpdateTime }}</div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </div>

                        <!-- Tab页容器 -->
                        <div class="tab-container">
                            <div class="tab-header">
                                <button 
                                    class="tab-item" 
                                    :class="{ active: activeTab === 'stocks' }"
                                    @click="activeTab = 'stocks'">
                                    股票列表
                                </button>
                                <button 
                                    class="tab-item" 
                                    :class="{ active: activeTab === 'dates' }"
                                    @click="activeTab = 'dates'">
                                    异动日期
                                </button>
                            </div>
                            
                            <div class="tab-content">
                                <!-- 股票列表Tab页 -->
                                <div class="tab-pane" :class="{ active: activeTab === 'stocks' }">
                                    <!-- 股票列表部分 -->
                                    <div class="pane-section">
                                        <div class="pane-header">
                                            <h5 class="pane-title">股票列表</h5>
                                            <div class="panel-actions">
                                                <el-input
                                                    v-model="stockSearchQuery"
                                                    placeholder="搜索股票"
                                                    size="mini"
                                                    style="width: 120px;"
                                                    clearable
                                                    @input="handleStockSearch">
                                                    <i slot="prefix" class="el-icon-search"></i>
                                                </el-input>
                                            </div>
                                        </div>
                                        
                                        <div class="stock-list">
                                            <el-table
                                                :data="filteredStockList"
                                                style="width: 100%"
                                                stripe
                                                height="200px"
                                                @row-dblclick="handleStockDoubleClick">
                                                
                                                <el-table-column prop="stockCode" label="代码" width="80">
                                                    <template #default="scope">
                                                        <span class="stock-code">{{ scope.row.stockCode }}</span>
                                                    </template>
                                                </el-table-column>
                                                
                                                <el-table-column prop="stockName" label="名称" min-width="120">
                                                    <template #default="scope">
                                                        <span class="stock-name">{{ scope.row.stockName }}</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                    
                                    <!-- 股票异动详情部分 -->
                                    <div class="pane-section detail-panel-expand" v-if="stockMovementData.length > 0">
                                        <div class="pane-header">
                                            <h5 class="pane-title">股票异动详情 - {{ selectedStockName }}</h5>
                                            <div class="panel-actions">
                                                <el-tag type="info" size="mini">{{ stockMovementData.length }} 条记录</el-tag>
                                            </div>
                                        </div>
                                        
                                        <div class="detail-table">
                                            <el-table
                                                :data="paginatedStockMovementData"
                                                style="width: 100%"
                                                stripe
                                                height="250px">
                                                
                                                <el-table-column prop="serialNumber" label="序号" width="60" />
                                                <el-table-column prop="date" label="日期" width="100" />
                                                <el-table-column prop="reason" label="异动原因" min-width="200">
                                                    <template #default="scope">
                                                        <span class="reason-cell">{{ scope.row.reason || '-' }}</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            
                                            <div class="pagination-wrapper">
                                                <el-pagination
                                                    @size-change="handleMovementSizeChange"
                                                    @current-change="handleMovementCurrentChange"
                                                    :current-page="movementCurrentPage"
                                                    :page-sizes="[5, 10, 20]"
                                                    :page-size="movementPageSize"
                                                    layout="total, sizes, prev, pager, next"
                                                    :total="stockMovementData.length"
                                                    small>
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 异动日期Tab页 -->
                                <div class="tab-pane" :class="{ active: activeTab === 'dates' }">
                                    <!-- 异动日期列表 -->
                                    <div class="pane-section">
                                        <div class="pane-header">
                                            <h5 class="pane-title">异动日期列表</h5>
                                        </div>
                                        
                                        <div class="date-list">
                                            <el-table
                                                :data="paginatedDateList"
                                                style="width: 100%"
                                                stripe
                                                height="200px"
                                                @row-dblclick="handleDateDoubleClick">
                                            
                                                <el-table-column prop="serialNumber" label="序号" width="60" />
                                                <el-table-column prop="date" label="日期" width="100">
                                                    <template #default="scope">
                                                        <span class="date-cell">{{ scope.row.date }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="reason" label="异动原因" min-width="180">
                                                    <template #default="scope">
                                                        <span class="reason-cell">{{ scope.row.reason || '-' }}</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            
                                            <div class="pagination-wrapper">
                                                <el-pagination
                                                    @size-change="handleDateSizeChange"
                                                    @current-change="handleDateCurrentChange"
                                                    :current-page="dateCurrentPage"
                                                    :page-sizes="[5, 10, 20]"
                                                    :page-size="datePageSize"
                                                    layout="total, sizes, prev, pager, next"
                                                    :total="dateList.length"
                                                    small>
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 日期对应股票列表 -->
                                    <div class="pane-section detail-panel-expand" v-if="dateStockList.length > 0">
                                        <div class="pane-header">
                                            <h5 class="pane-title">{{ selectedDate }} 异动股票列表</h5>
                                            <div class="panel-actions">
                                                <el-tag type="info" size="mini">{{ dateStockList.length }} 只股票</el-tag>
                                            </div>
                                        </div>
                                        
                                        <div class="stock-list">
                                            <el-table
                                                :data="dateStockList"
                                                style="width: 100%"
                                                stripe
                                                height="250px">
                                                
                                                <el-table-column prop="serialNumber" label="序号" width="60" />
                                                <el-table-column prop="stockCode" label="代码" width="80">
                                                    <template #default="scope">
                                                        <span class="stock-code">{{ scope.row.stockCode }}</span>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="stockName" label="名称" min-width="120">
                                                    <template #default="scope">
                                                        <span class="stock-name">{{ scope.row.stockName }}</span>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                      </div>

                    <div v-else class="welcome-panel">
                        <el-empty description="请从左侧选择板块查看详情" :image-size="120">
                            <template #image>
                                <i class="el-icon-s-grid" style="font-size: 48px; color: #c0c4cc;"></i>
                            </template>
                        </el-empty>
                    </div>
                </div>
            </div>
        </div>
    `,
    
    data() {
        return {
            loadingBlocks: false,
            loadingDetail: false,
            lastUpdateTime: new Date().toLocaleString(),
            selectedBlock: null,
            blockList: [],
            filteredBlockList: [],
            blockSearchQuery: '',
            stockSearchQuery: '',
            
            // 板块列表分页
            blockCurrentPage: 1,
            blockPageSize: 50,
            
            // Tab相关
            activeTab: 'stocks',
            
            // 股票相关
            stockList: [],
            filteredStockList: [],
            selectedStockName: '',
            stockMovementData: [],
            movementCurrentPage: 1,
            movementPageSize: 10,
            
            // 日期相关
            dateList: [],
            dateCurrentPage: 1,
            datePageSize: 10,
            selectedDate: '',
            dateStockList: []
        }
    },
    
    computed: {
        paginatedBlockList() {
            const start = (this.blockCurrentPage - 1) * this.blockPageSize;
            const end = start + this.blockPageSize;
            return this.filteredBlockList.slice(start, end);
        },
        
        paginatedStockMovementData() {
            const start = (this.movementCurrentPage - 1) * this.movementPageSize;
            const end = start + this.movementPageSize;
            return this.stockMovementData.slice(start, end);
        },
        
        paginatedDateList() {
            const start = (this.dateCurrentPage - 1) * this.datePageSize;
            const end = start + this.datePageSize;
            return this.dateList.slice(start, end);
        }
    },
    
    methods: {
        async loadBlockList() {
            this.loadingBlocks = true;
            try {
                const response = await axios.get('/api/block-movement/blocks');
                console.log('板块列表API响应:', response.data);
                
                if (response.data && response.data.code === 200) {
                    this.blockList = response.data.data || [];
                    this.filteredBlockList = [...this.blockList];
                    console.log('成功加载板块列表:', this.blockList.length, '个板块');
                } else {
                    console.error('板块列表数据格式异常:', response.data);
                    this.filteredBlockList = [];
                }
            } catch (error) {
                console.error('加载板块列表失败:', error);
                this.filteredBlockList = [];
                if (window.ElMessage) {
                    window.ElMessage.error('板块列表加载失败: ' + (error.response?.data?.message || error.message));
                }
            } finally {
                this.loadingBlocks = false;
            }
        },
        
        async loadBlockDetail(blockName) {
            this.loadingDetail = true;
            try {
                const response = await axios.get(`/api/block-movement/block/${encodeURIComponent(blockName)}`);
                console.log('板块详情API响应:', response.data);
                
                if (response.data && response.data.code === 200) {
                    const blockDetail = response.data.data;
                    if (blockDetail) {
                        this.processBlockDetail(blockDetail);
                    }
                } else {
                    console.error('板块详情数据格式异常:', response.data);
                }
            } catch (error) {
                console.error('加载板块详情失败:', error);
                if (window.ElMessage) {
                    window.ElMessage.error('板块详情加载失败: ' + (error.response?.data?.message || error.message));
                }
            } finally {
                this.loadingDetail = false;
            }
        },
        
        processBlockDetail(blockDetail) {
            // 处理股票列表
            if (blockDetail.stockList) {
                this.stockList = blockDetail.stockList.split(',').map(item => {
                    const [code, name] = item.split(':');
                    return { stockCode: code, stockName: name };
                });
                this.filteredStockList = [...this.stockList];
            }
            
            // 处理日期列表
            if (blockDetail.dateReasonMapping) {
                this.dateList = blockDetail.dateReasonMapping.split(' | ').map((item, index) => {
                    const [date, ...reasonParts] = item.split(':');
                    const reason = reasonParts.join(':');
                    return { 
                        serialNumber: index + 1, 
                        date: date.trim(), 
                        reason: reason ? reason.trim() : '-' 
                    };
                });
            }
        },
        
        async handleBlockClick(block) {
            console.log('选择板块:', block);
            this.selectedBlock = block;
            this.selectedStockName = '';
            this.stockMovementData = [];
            this.dateStockList = [];
            await this.loadBlockDetail(block.blockName);
            this.lastUpdateTime = new Date().toLocaleString();
        },
        
        async selectBlock(block) {
            await this.handleBlockClick(block);
        },
        
        handleBlockSearch() {
            const query = this.blockSearchQuery.trim().toLowerCase();
            
            if (!query) {
                this.filteredBlockList = [...this.blockList];
                this.blockCurrentPage = 1;
                return;
            }
            
            this.filteredBlockList = this.blockList.filter(block => 
                block.blockName.toLowerCase().includes(query)
            );
            
            this.blockCurrentPage = 1;
            console.log('板块搜索结果:', this.filteredBlockList.length, '条记录');
        },
        
        handleStockSearch() {
            const query = this.stockSearchQuery.trim().toLowerCase();
            
            if (!query) {
                this.filteredStockList = [...this.stockList];
                return;
            }
            
            this.filteredStockList = this.stockList.filter(stock => 
                stock.stockCode.toLowerCase().includes(query) ||
                stock.stockName.toLowerCase().includes(query)
            );
        },
        
        async handleStockDoubleClick(stock) {
            console.log('双击股票:', stock);
            this.selectedStockName = stock.stockName;
            
            // 添加视觉反馈
            if (window.ElMessage) {
                window.ElMessage.info(`正在加载 ${stock.stockName} 的异动详情...`);
            }
            
            await this.loadStockMovement(this.selectedBlock.blockName, stock.stockCode);
        },
        
        async loadStockMovement(blockName, stockCode) {
            try {
                const response = await axios.get('/api/block-movement/stock-movement', {
                    params: { blockName, stockCode }
                });
                console.log('股票异动信息API响应:', response.data);
                
                if (response.data && response.data.code === 200) {
                    this.stockMovementData = response.data.data || [];
                    this.movementCurrentPage = 1;
                } else {
                    console.error('股票异动信息数据格式异常:', response.data);
                    this.stockMovementData = [];
                }
            } catch (error) {
                console.error('加载股票异动信息失败:', error);
                this.stockMovementData = [];
                if (window.ElMessage) {
                    window.ElMessage.error('股票异动信息加载失败');
                }
            }
        },
        
        async handleDateDoubleClick(dateItem) {
            console.log('双击日期:', dateItem);
            this.selectedDate = dateItem.date;
            
            // 添加视觉反馈
            if (window.ElMessage) {
                window.ElMessage.info(`正在加载 ${dateItem.date} 的异动股票列表...`);
            }
            
            await this.loadDateStockList(this.selectedBlock.blockName, dateItem.date);
        },
        
        async loadDateStockList(blockName, date) {
            try {
                const response = await axios.get('/api/block-movement/stock-list', {
                    params: { blockName, date }
                });
                console.log('日期股票列表API响应:', response.data);
                
                if (response.data && response.data.code === 200) {
                    this.dateStockList = response.data.data || [];
                } else {
                    console.error('日期股票列表数据格式异常:', response.data);
                    this.dateStockList = [];
                }
            } catch (error) {
                console.error('加载日期股票列表失败:', error);
                this.dateStockList = [];
                if (window.ElMessage) {
                    window.ElMessage.error('日期股票列表加载失败');
                }
            }
        },
        
        getHotStocks() {
            if (!this.selectedBlock || !this.selectedBlock.hotStocks) return [];
            
            return this.selectedBlock.hotStocks.split(',')
                .filter(stock => stock && stock.trim())
                .slice(0, 5); // 只显示前5个热门股票
        },
        
        getBlockRowClass({row, rowIndex}) {
            if (this.selectedBlock && row.blockName === this.selectedBlock.blockName) {
                return 'selected-row';
            }
            return '';
        },
        
        // 分页处理方法
        handleBlockSizeChange(newSize) {
            this.blockPageSize = newSize;
            this.blockCurrentPage = 1;
        },
        
        handleBlockCurrentChange(newPage) {
            this.blockCurrentPage = newPage;
        },
        
        handleMovementSizeChange(newSize) {
            this.movementPageSize = newSize;
            this.movementCurrentPage = 1;
        },
        
        handleMovementCurrentChange(newPage) {
            this.movementCurrentPage = newPage;
        },
        
        handleDateSizeChange(newSize) {
            this.datePageSize = newSize;
            this.dateCurrentPage = 1;
        },
        
        handleDateCurrentChange(newPage) {
            this.dateCurrentPage = newPage;
        },
        
        async refreshBlockList() {
            await this.loadBlockList();
            if (window.ElMessage) {
                window.ElMessage.success('板块列表已刷新');
            }
        },
        
        async refreshBlockDetail() {
            if (this.selectedBlock) {
                await this.loadBlockDetail(this.selectedBlock.blockName);
                this.lastUpdateTime = new Date().toLocaleString();
                if (window.ElMessage) {
                    window.ElMessage.success('板块详情已刷新');
                }
            }
        }
    },
    
    mounted() {
        this.loadBlockList();
    }
};